/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 */
import {CART_LIST,CHECK_ALL,UN_CHECK_ALL,CHECK_ITEM
} from './mutations-types.js'
import { Toast,Dialog } from 'vant';
import http from '@/common/api/request.js'
//import { Toast } from "mint-ui";
export default{
    state:{
        list:[],//是购物车的数据
        selectList:[],//选中的数据     
    },
    getters:{
        isCheckedAll( state ){ //判断是否全选
            return state.list.length == state.selectList.length; //返回true或者false
        },
        total(state ){
            let total={
               num:0,
               price:0,
            }
            state.list.forEach(v=>{
                if(v.checked==true){
                /*total.num += v.goods_num;//总件数  不修改的话是字符串类型 要改为数字 */
                total.num +=parseInt(v.goods_num);
                total.price += v.goods_price * v.goods_num;//单价乘以数量等于总价
                }else{
                    //console.log("未选中");                
                }
            })
            return total;
        }
    },
    /* 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。 */
    mutations:{ //vuex
        [CART_LIST]( state, cartArr){
            state.list = cartArr;
            //循环加数据 v.id  添加了默认是进入购物车全选
            //state.selectList = cartArr;
            /* cartArr.forEach(v=>{
                state.selectList.push( v.id );
            }) */
           //解决第一次进入购物车页面无法实现自动全选
            //console.log(state.selectList);//点击全选=》拷贝的步骤
            state.selectList = state.list.map(v=>{
                return v.id;
            })

        },
        //全选  selectList:[],//选中的数据 
        [CHECK_ALL]( state ){
            //赋值拷贝一份
            state.selectList = state.list.map(v=>{
                v.checked = true;
                return v.id;
            })
            //解决第一次进入购物车页面无法实现自动全选
            //console.log(state.selectList);//点击全选=》拷贝的步骤
        },
        //全不选 list:[],//是购物车的数据
        [UN_CHECK_ALL]( state ){
            state.list.forEach(v=>{
                v.checked = false;
            })
            state.selectList = [];//设为空
        },
        //单选
        [CHECK_ITEM]( state ,index ){
            //console.log(index); index是下标
            //console.log(state.list[index].id,state.selectList);
            let id = state.list[index].id;
            let i = state.selectList.indexOf(id);//查找index 找到返回，找不到返回-1
            //能在selectList找到对应的id，就删除
            if( i > -1){//删除
                return state.selectList.splice(i,1);
            }
            //有没有return是有区别的
            //如果之前没有选中，就给selectList添加一个id进去
            if( i = -1){//没有则加入
                return state.selectList.push( id );//实现正反选
            }
            
        },
        //删除  //删除所有 利用数组实现全部删除
        delGoods( state ){
            state.list = state.list.filter(v=>{
                return state.selectList.indexOf( v.id ) == -1
            })
        }
    },
    actions:{  //在actions里提交  在commit提交//用到gettes
        checkAllFn({commit,getters}){  //这里只是一个参数
            getters.isCheckedAll ? commit('unCheckAll') : commit('checkAll');//全选和全反选切换
        },

        // 删除操作//要在vuex里面处理并写到数据库中
        delGoodsFn({commit,state},id){ //传两个参数
            //如果没有选中，则提示信息
            //console.log(id);可以打印id
            if( state.selectList.length == 0 ){
                //Toast('请选择要删除的商品');
                Toast('请选择商品');
            }
            
            //删除使用的临时变量
            let arrCart = []; //数组形式

            Dialog.confirm({
              message: '删除这些商品',
            }).then(() => {
                //单个删除
                //id传入的是number就是单个的，其他就是点击全部删除
                if( typeof id =='number' ){               
                    arrCart = [id];
                    let index = state.list.findIndex(v=>{
                        return v.id == id 
                    })
                    //index 在上面
                    state.list.splice(index,1);//给list进行更新//通过index
                }else{
                //多选删除
                    arrCart = state.selectList;
                    commit('delGoods');
                    //全不选
                    //commit('unCheckAll');
                }
                //访问数据库
                http.$axios({
                	url:'/api/deleteCart',
                    method:'post',
                    //axios 定义在request.js里面
                    headers:{},
                    data:{
                       arrId:arrCart
                    }//带下划线的res？？
                }).then(res,_err =>{
                    //
                    //state.list.splice(id,1);//应该写在上面的
                    console.log( res );
                    if(res.success){
                        //Toast('删除成功');
                        Toast(res.msg);
                    }
                    throw _err;
                })
            })
            .catch(()=>{
                return;
            });//捕获错误  这个是按取消的时候
        }
    }
}